<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      /* 
      content内容区，元素中的所有子元素和文本内容都在内容区中排列
      内容区的大小由width和height两个属性来设置
      
      */
      width: 200px;
      height: 200px;
      background-color: #096;
      border: 10px solid red;
      /* 
      边框也会影响整个盒子的大小
      */
    }
  </style>
</head>

<body>
  <!-- 
    盒子模型，盒模型，框模型

    css将页面中的所有元素都设置为一个矩形的盒子
    将元素设置为矩形，对页面的布局就变成将不同的盒子摆放到不同的位置

    盒子的组成：
    内容区（content）
    内边距（padding）
    边框（border）
    外边距（margin）

    在CSS中，盒子模型（Box Model）是一种用于布局元素的基本概念。
    每个HTML元素被看作是一个矩形的盒子，
    这个盒子包括了内容（content）、内边距（padding）、边框（border）和外边距（margin）这四个部分。
    总宽度=width+2×padding+2×border+2×margin
   -->
  <div>div1</div>
</body>

</html>